#{extends 'F/_web.html' /}
#{set title:'注册' /}


<div class="row" id="step-1">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        <form id="mobile-form" method="post" action="@{Users.validateMobile}">
            <div class="form-group">
                <label for="exampleInputEmail1">手机号码</label>
                <input name="mobile" type="text" class="form-control" id="exampleInputEmail1" placeholder="手机号码">
            </div>
            <button type="submit" class="btn btn-default">获取手机验证码</button>
        </form>
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row" style="display:none" id="step-2">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        <form method="post" action="@{Users.regiester}">
            <div class="form-group">
                <label for="mobile">手机号码</label>
                <input name="mobile" type="text" class="form-control" id="mobile" placeholder="手机号码">
            </div>
            <div class="form-group">
                <label for="valcode">验证码</label>
                <input name="valcode" type="text" class="form-control" id="valcode" placeholder="验证码">
            </div>
            <div class="form-group">
                <label for="passwd">登录密码</label>
                <input name="passwd" type="text" class="form-control" id="passwd" placeholder="登陆密码">
            </div>
            <div class="form-group">
                <label for="nickname">昵称</label>
                <input name="nickname" type="text" class="form-control" id="nickname" placeholder="昵称">
            </div>
            <button type="submit" class="btn btn-default">注册</button>
        </form>
    </div>
    <div class="col-md-4">
    </div>
</div>
#{set 'moreScripts'}
<script>
    $(document).ready(function () {
        console.log('welcome');
        $('#mobile-form').on('submit', function (e) {
            e.preventDefault();
            var mobile = $('input[name="mobile"]', '#mobile-form').val();
            $.post($('#mobile-form').attr('action'), {mobile: mobile}, function (ret) {
                $('#step-1').fadeOut();
                $('input[name="mobile"]', '#step-2').val(mobile);
                $('#step-2').fadeIn();
            });
        });
    });
</script>
#{/set}
